<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="primus" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="fn" tagdir="/WEB-INF/tags/form" %>
<primus:page title="门店列表">
    <jsp:attribute name="css">
        <style type="text/css">
            #table .operate {
                min-width: 80px;
            }
        </style>
    </jsp:attribute>
    <jsp:attribute name="script">
        <script type="application/javascript">
            $(function () {
                $("#table").DataTable({
                    "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "所有"]],
                    "columnDefs": [{"targets": [11], "orderable": false}],
                    "searching": false,
                    "order": [[0, "asc"]]
                });
            });
            $("body").on("click", ".turn-on", function () {
                var id = $(this).data("id");
                $.post("/depots/updateBusiness", {
                    id: id,
                    businessStatus: "ON"
                }, function (data) {
                    $(this).removeClass("turn-on").addClass("turn-off");
                    $(this).text("闭店");
                })
            }).on("click", ".turn-off", function () {
                var id = $(this).data("id");
                $.post("/depots/updateBusiness", {
                    id: id,
                    businessStatus: "OFF"
                }, function (data) {
                    $(this).removeClass("turn-off").addClass("turn-on");
                    $(this).text("开店");
                })

            })
        </script>
    </jsp:attribute>
    <jsp:body>
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="welcome.do">
                        首页
                    </a>
                </li>
                <li>
                    门店管理
                </li>
                <li class="active">
                    门店列表
                </li>
            </ul>
        </div>

        <div class="page-content">

            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <div class="row">
                        <div class="col-xs-12">
                            <h3 class="header smaller lighter blue">
                                门店列表 <span
                                    class="inline help-block">(Javascript DataTable 翻页查询，当前这个不会和后台交互，全部在页面完成)</span>
                            </h3>
                            <div class="row">
                                <fn:form _action="depots/list">
                                    <fn:select _title="省" _name="provinceId" _items="${provinces}"
                                               _valuePropertyName="id" _layout="three"/>
                                    <fn:select _title="市" _name="cityId" _items="${cities}" _valuePropertyName="id"
                                               _layout="three"/>
                                    <fn:select _title="区县" _name="districtId" _items="${districts}"
                                               _valuePropertyName="id" _layout="three"/>
                                    <fn:text _title="门店编码" _name="depotCode" _layout="three"/>
                                    <fn:text _title="门店名称" _name="name" _layout="three"/>

                                </fn:form>
                            </div>
                            <table id="table" class="table table-hover">
                                <thead>
                                <tr>
                                    <th>门店编码</th>
                                    <th>门店简称</th>
                                    <th>门店全称</th>
                                    <th>上级机构ID</th>
                                    <th>机构类型</th>
                                    <th>省</th>
                                    <th>市</th>
                                    <th>区/县</th>
                                    <th>开店时间</th>
                                    <th>关店时间</th>
                                    <th>营业状态</th>
                                    <th class="center operate">操作</th>
                                </tr>
                                </thead>

                                <tbody>
                                <c:forEach items="${pageResult.content}" var="item">
                                    <tr id="tr-${item.id}">
                                        <td><c:out value="${item.depotCode}"/></td>
                                        <td><c:out value="${item.name}"/></td>
                                        <td><c:out value="${item.orgId}"/></td>
                                        <td><c:out value="${item.orgType}"/></td>
                                        <td><c:out value="${item.provinceName}"/></td>
                                        <td><c:out value="${item.cityName}"/></td>
                                        <td><c:out value="${item.districtName}"/></td>
                                        <td><c:out value="${item.address}"/></td>
                                        <td><fmt:formatDate value="${item.beginBusiness}" pattern="HH:mm:ss"/></td>
                                        <td><fmt:formatDate value="${item.endBusiness}" pattern="HH:mm:ss"/></td>
                                        <td><c:out value="${item.businessStatus eq 'ON'?'营业':'关店'}"/></td>
                                        <td>
                                            <div class="hidden-sm hidden-xs btn-group">
                                                <a href="javascript:void(0)" data-id="<c:out value='${item.id}'/>"
                                                   class="${item.businessStatus eq 'ON'? 'turn-off':'turn-on'}">
                                                        ${item.businessStatus eq 'ON'? '开店':'关店'}
                                                </a>
                                                <sec:authorize access="hasAuthority('OPT_DEPOT_DETAIL')">
                                                    <a href="${contextPath}/depots/detail.do?depotCode=${item.depotCode}"
                                                       class="btn btn-minier btn-info">
                                                        <i class="ace-icon fa fa-list bigger-120"></i>
                                                    </a>
                                                </sec:authorize>
                                            </div>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div><!-- /.span -->
                    </div><!-- /.row -->
                    <!-- PAGE CONTENT ENDS -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div>
    </jsp:body>
</primus:page>
